<span
  dDropDown
  appendToBody
  [appendToBodyDirections]="['centerDown', 'centerUp', 'rightDown', 'leftDown', 'rightUp', 'leftUp']"
  [closeScope]="'blank'"
  (toggleEvent)="showFilterContent($event)"
  #filterDropdown="d-dropdown"
>
  <span dDropDownToggle>
    <i
      class="filter-icon"
      [ngClass]="{
        'filter-icon-active': filterIconActive === undefined ? filterIconActiveInner : filterIconActive,
        'filter-icon-visiable': showFilterIcon
      }"
    >
      <svg
        width="16px"
        height="16px"
        viewBox="0 0 16 16"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g>
            <polygon points="10.0085775 7 10.0085775 15 6 13 6 7 2 3 2 1 14 1 14 3"></polygon>
          </g>
        </g>
      </svg>
    </i>
  </span>
  <div
    dDropDownMenu
    class="devui-dropdown-menu"
    [ngClass]="{ 'filter-content-hidden': isFilterHidden }"
    [style.width]="filterBoxWidth || '250px'"
    [ngStyle]="{ 'min-height': filterBoxHeight ? filterBoxHeight : '60px' }"
  >
    <ng-template
      *ngIf="filterDropdown.isOpen"
      [ngTemplateOutlet]="customFilterTemplate || (filterMultiple ? filterContentTmplForMultiple : filterContentTmplForRadio)"
      [ngTemplateOutletContext]="{
        $implicit: this,
        filterListDisplay: filterListDisplay,
        dropdown: filterDropdown,
        column: column
      }"
    >
    </ng-template>
  </div>
</span>

<ng-template #filterContentTmplForMultiple let-filterListMultiple="filterListDisplay" let-dropdown="dropdown">
  <div class="data-table-column-filter-content filter-bg filter-font-color" [style.width]="filterBoxWidth" [style.height]="filterBoxHeight">
    <div class="filter-search-container">
      <d-search
        [iconPosition]="'left'"
        [style.width]="filterWidthNum - filterPadding + 'px'"
        [isKeyupSearch]="true"
        [styleType]="'gray'"
        [placeholder]="i18nCommonText?.searchPlaceholder"
        (searchFn)="onSearch($event)"
      ></d-search>
    </div>
    <div class="filter-options">
      <d-checkbox
        style="display: inline-block"
        [label]="i18nCommonText?.checkAll"
        (change)="filterCheckAll($event)"
        [halfchecked]="filterHalfChecked"
        [(ngModel)]="filterAllChecked"
      >
      </d-checkbox>
      <ng-container *ngIf="extraFilterTemplate">
        <ng-template
          [ngTemplateOutlet]="extraFilterTemplate"
          [ngTemplateOutletContext]="{ checked: filterAllChecked, halfChecked: filterHalfChecked }"
        >
        </ng-template>
      </ng-container>
      <div class="line"></div>
      <cdk-virtual-scroll-viewport
        itemSize="30"
        minBufferPx="300"
        maxBufferPx="500"
        class="normal-filter-list-container devui-scrollbar"
        [style.height]="filterBoxHeight ? 'calc(' + filterBoxHeight + ' - 180px)' : 30 * (filterListMultiple?.length || 1) + 'px'"
        [style.maxHeight]="filterBoxHeight ? 'none' : '250px'"
      >
        <div *cdkVirtualFor="let item of filterListMultiple" class="checkbox-group">
          <d-checkbox [label]="item.name" [(ngModel)]="item.checked" (change)="checkboxChange($event, item)"> </d-checkbox>
        </div>
        <div class="no-data-container" *ngIf="!filterListMultiple?.length">{{ i18nCommonText?.noData }}</div>
      </cdk-virtual-scroll-viewport>
    </div>
    <div class="line"></div>
    <div class="filter-operation">
      <d-button
        bsStyle="common"
        class="reset-btn"
        [disabled]="!isDirty && !filterHalfChecked && !filterAllChecked"
        (btnClick)="resetFilterData(); closeFilter(dropdown)"
        >{{ i18nCommonText?.reset }}</d-button
      >
      <d-button class="button-style" (click)="getFilterDataMultiple(); closeFilter(dropdown)">{{ i18nCommonText?.btnOk }}</d-button>
    </div>
  </div>
</ng-template>
<ng-template #filterContentTmplForRadio let-filterListRadio="filterListDisplay" let-dropdown="dropdown">
  <div class="data-table-column-filter-content filter-bg filter-font-color" [style.width]="filterBoxWidth" [style.height]="filterBoxHeight">
    <div class="filter-search-container">
      <d-search
        [iconPosition]="'left'"
        [style.width]="filterWidthNum - filterPadding + 'px'"
        [isKeyupSearch]="true"
        [styleType]="'gray'"
        [placeholder]="i18nCommonText?.searchPlaceholder"
        (searchFn)="onSearch($event)"
      ></d-search>
    </div>
    <div class="filter-options" role="menu">
      <div class="normal-filter-list-container devui-scrollbar" role="menuitem" [style.maxHeight]="filterBoxHeight ? 'none' : '350px'">
        <div
          [title]="item.name"
          *ngFor="let item of filterListRadio"
          class="drop-down-item"
          [ngClass]="{ 'filter-item-active': selectedItem === item }"
          (click)="getFilterDataRadio(item); closeFilter(dropdown)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</ng-template>
